<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <ul>
    <li>AAAA</li>
    <li>BBBB</li>
    <li>CCCC</li>
  </ul>

  <script>
    /* 扩展运算符 */
    /* 基本使用 */
    // const arr = [1, 3, 5]
    // function fn (x, y, z) {
    //   console.log(x, y, z)
    // }
    // // fn(arr) // 不对
    // fn(...arr)

    // // console.log(arr)
    // console.log(...arr)

    /* 
    - 合并数组
    - 字符串转换为数组
    */
    //  /* - 复制/浅拷贝数组 */
    //   const arr  = [6, {}, []]
    //   const arr2 = [...arr]
    //   console.log(arr2)
    //   console.log(arr2[1]===arr[1]) // true

    //   /* 合并数组 */
    //   const arr3 = [7, 9]
    //   const arr4 = [...arr, ...arr3]
    //   console.log(arr4)

    //   /* 字符串转换为数组 */
    //   const arr5 = [...'abcd']
    //   console.log(arr5)

    /* 
    - Array.from() 把伪数组转换成数组(可以使用数组的方法)
    - Array.of()  将多个数据封装成数组
    */
    // const lis = document.getElementsByTagName('li')
    // // lis.forEach(li => {  // lis是一个伪数组
    // //   console.log(li.innerHTML)
    // // })
    // const lis2 = Array.from(lis)
    // lis2.forEach(li => {  // lis2是一个真数组
    //   console.log(li.innerHTML)
    // })

    // const arr = Array.of(1, 'abc', {}, [])
    // console.log(arr)

    /* 
    - find(): 查找并返回第一个满足条件的， 如果一个都没有返回undefined
    - findIndex(): 查找并返回第一个满足条件的元素下标， 如果一个都没有返回-1
    */
   const arr = [3, 8, 5, 4]
   // 查找一个大于4的元素
   console.log(arr.find(item => item>4)) // 8
   // 查找一个大于4的元素的下标
   console.log(arr.findIndex(item => item>4)) // 1

   /* 
   includes()方法返回一个布尔值，表示某个数组是否包含给定的值，
    与字符串的`includes`方法类似
   */
  console.log(arr.includes(5), arr.includes(9)) // true false

  /* 
  flat() 
  */
  const arr2 = [2, [3, [7, [8, 3]]]]
  console.log(arr2.flat())
  console.log(arr2.flat(2))
  console.log(arr2.flat(Infinity)) // 拉平为一维数组


  </script>
</body>
</html>